<template>
  <div class="container">
    <div class="banner">
      <div class="title">
        <h2>{{ ServiceProductBannerData.title }}</h2>
      </div>
      <div class="small-title">
        {{ ServiceProductBannerData.smallTitle.first }}&nbsp;&nbsp; /
        &nbsp;&nbsp;{{ ServiceProductBannerData.smallTitle.second }}
        &nbsp;&nbsp;/&nbsp;&nbsp;
        {{ ServiceProductBannerData.smallTitle.third }}&nbsp;&nbsp;
        /&nbsp;&nbsp; {{ ServiceProductBannerData.smallTitle.fourth }}
      </div>
      <!-- 图片下面 -->
      <div class="bottom">
        <ul class="list">
          <li
            class="item"
            v-for="(item, index) in ServiceProductBannerData.bottom"
            :key="index"
          >
            <i :class="item.icon"></i>
            <div class="text">
              <h4>{{ item.title }}</h4>
              <span>{{ item.content }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ServiceProductBanner",
  props: { ServiceProductBannerData: Object },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  .banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: url(../../assets/images/serviceProduct/Group27.png) no-repeat
      center center;
    min-height: 760px;
    .title {
      font-size: 42px;
      margin-bottom: 56px;
    }
    .small-title {
      font-size: 21px;
    }
    .bottom {
      position: absolute;
      padding: 20px 100px;
      bottom: -5%;
      color: #000000;
      box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      .list {
        display: flex;
        .item {
          margin: 20px;
        }
        i {
          transform: translateY(-10px);
          font-size: 30px;
          margin: 0 10px;
        }
        .text {
          display: inline-block;
          h4 {
            font-size: 24px;
          }
          span {
            color: #8c8c8cff;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.8;
          }
        }
      }
    }
  }
}
</style>
